<template>
	<view class="card"  >
		
	
	<view class="uniCard" :style="{background:`url(${props.data.imgUrl})`}">
		<view class="title">
			<i class="iconfont icon-headphones"></i>
			<span>{{props.data.hear}}</span>
		</view>
		
					
	</view>
	<view class="described">
		{{props.data.described}}
	</view>
	</view>
</template>

<script setup> 
import { ref,defineProps  } from 'vue'
	
	const props = defineProps({
		data:Object
	});
</script>

<style lang="scss" scoped>
	.card{
		display: inline-block;
		width: 200rpx;
		padding-right: 25rpx;
		.uniCard{
			// margin-top: 150px;
			display: inline-block;
			height: 200rpx;
			width: 200rpx;
			border-radius: 5px;
			padding: 0px !important;
			background-repeat: no-repeat;
			background-position:center center;
			background-size: cover;
			position: relative;
			.title{
				position: absolute;
				top: 10rpx;
				left: 10rpx;
				color: white;
				font-size: 20rpx ;
				
				.iconfont{
					margin-right: 10rpx;
						font-size: 20rpx !important;
				}
			}
			
			
		}
		.described{
			width: 100%;
			 display: -webkit-box;
			// height: 50rpx;
			white-space:wrap;
			overflow: hidden;
			text-overflow: ellipsis;
			color: #585668;
			font-size: 24rpx;
			letter-spacing: 4rpx;
			 -webkit-box-orient: vertical;
			 -webkit-line-clamp: 2;
		}
	}
</style>